<template>
  <div class="cart">
    <Tips />
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="changeChecked(item)"
      >
        <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
        <van-stepper
          v-model="item.number"
          theme="round"
          button-size="22"
          v-show="isEditing"
          disable-input
          @change="stepperChange(item)"
        />
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="delGood(item.product_id)"
          />
        </template>
          </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span
        >件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
          @click="editBtn"
        >
          {{ isEditing ? "完成编辑" : "编辑" }}
        </van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartListData,
  ChangeGoodChecked,
  StepperChangeData,
  DeleteGood
} from "@/utils/api";
import Tips from "@/components/Tips";
export default {
  data() {
    return {
      result: [],
      cartList: [],
      cartTotal: [],
      checked: true,
      isEditing: false,
    };
  },
  computed: {
    checkedAll: {
      get() {
        // 什么时候表示全选?? result的长度和cartList的长度一致的时候
        return this.result.length == this.cartList.length;
      },
      set(val) {
        // val即将要修改成的新的值
        // if(this.isEditing)return;
        console.log("----set-----------", val);

        // 处理id数组
        let ids_arr = [];
        this.cartList.map((item) => {
          ids_arr.push(item.product_id);
        });
        // console.log(ids_arr.join());
        ChangeGoodChecked({
          isChecked: val ? 1 : 0,
          productIds: ids_arr.join(),
        }).then((res) => {
          if (res.data.errno == 0) {
            console.log(res);
            this.totalFn(res.data.data);
          }
        });
      },
    },
  },
  created() {
    // GetCartListData().then(res=>{
    //     // if(res.data.errno==0){
    //     //     console.log(res);
    //     //     this.result = []
    //     //      this.totalFn(res.data.data)
    //     // }
    // }),
    GetCartListData().then((res) => {
      if (res.data.errno == 0) {
        console.log(res);
        this.totalFn(res.data.data);
      }
    });
  },

  mounted() {},

  methods: {
    editBtn() {
      this.isEditing = !this.isEditing;
    },
    totalFn(data) {
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;

      // 清空 this.result数组, 后面的操作不会使这个数组越来越长
      this.result = [];
      this.cartList.map((item) => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    onClickEditAddress() {},
    onSubmit() {
      this.$toast.fail("维护中");
    },
    changeChecked(item) {
      if(this.isEditing){
          return
      }else{
        ChangeGoodChecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id,
      }).then((res) => {
        if (res.data.errno == 0) {
          console.log(res);
          this.totalFn(res.data.data);
        }
      });
      }
      
    },
    stepperChange(item) {
      StepperChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.data.errno == 0) {
          this.totalFn(res.data.data);
        }
      });
    },
     delGood(pid){
            DeleteGood({
                productIds:pid.toString()
            }).then(res=>{
            console.log(res);
                if(res.data.errno==0){
                    this.totalFn(res.data.data)
                }
                // this.$router.go(0)
            })
        }
  },
  components: {
    Tips,
  },
};
</script>

<style lang="scss" scoped>
// .van-checkbox__label{
//     width: 200px;
//     display: flex;
//     justify-content: space-around;
//     align-items: center;

// }
// .cart {
//   width: 100%;
//   height: 100%;
//   // background: #ccc;
// }

.van-submit-bar {
  margin-bottom: 3.125rem;
}
::v-deep.van-checkbox__label {
  width: 100%;
}

.van-checkbox-group {
  background-color: #fff;
  padding-bottom: 1.5rem;
  .van-checkbox {
    padding: 0.1rem 0.15rem;
    border-bottom: 1px solid #ccc;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.van-stepper {
  text-align: right;
  padding-right: 1.25rem;
}
.van-button--square {
  height: 100%;
}
.van-card{
  width: 21.875rem;
}
</style>